<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
          name="viewport"/>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="../css/font.css" rel="stylesheet">
    <link href="../css/xadmin.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../js/xadmin.js" type="text/javascript"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="form-wrap">

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">输入框</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input autocomplete="off" class="layui-input" name="title" placeholder="请输入标题" type="text">
                        </div>
                        <div class="layui-col-md6">
                            <input autocomplete="off" class="layui-input" name="title" placeholder="用户名" type="text">
                        </div>
                        <div class="layui-col-md6">
                            <input autocomplete="off" class="layui-input" name="title" placeholder="密码" type="password">
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">下拉选择框</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md6">
                            <select lay-verify="" name="city">
                                <option value="">请选择一个城市</option>
                                <option value="010">北京</option>
                                <option value="021">上海</option>
                                <option value="0571">杭州</option>
                            </select>
                        </div>
                        <div class="layui-col-md6">
                            <select lay-verify="" name="city">
                                <option value="010">北京</option>
                                <option disabled value="021">上海（禁用效果）</option>
                                <option selected value="0571">杭州</option>
                            </select>
                        </div>
                        <div class="layui-col-md6">
                            <select name="quiz">
                                <option value="">请选择</option>
                                <optgroup label="城市记忆">
                                    <option value="你工作的第一个城市">你工作的第一个城市？</option>
                                </optgroup>
                                <optgroup label="学生时代">
                                    <option value="你的工号">你的工号？</option>
                                    <option value="你最喜欢的老师">你最喜欢的老师？</option>
                                </optgroup>
                            </select>
                        </div>
                        <div class="layui-col-md6">
                            <select lay-search lay-verify="required" name="city">
                                <option value="">带搜索的选择框</option>
                                <option value="1">layer</option>
                                <option value="2">form</option>
                                <option value="3">layim</option>
                                <option value="4">element</option>
                                <option value="5">laytpl</option>
                                <option value="6">upload</option>
                                <option value="7">laydate</option>
                                <option value="8">laypage</option>
                                <option value="9">flow</option>
                                <option value="10">util</option>
                                <option value="11">code</option>
                                <option value="12">tree</option>
                                <option value="13">layedit</option>
                                <option value="14">nav</option>
                                <option value="15">tab</option>
                                <option value="16">table</option>
                                <option value="17">select</option>
                                <option value="18">checkbox</option>
                                <option value="19">switch</option>
                                <option value="20">radio</option>
                            </select>
                        </div>
                        <div class="layui-col-md12">
                            <select lay-verify="" name="city">
                                <option value="">请选择一个城市</option>
                                <option value="010">北京</option>
                                <option value="021">上海</option>
                                <option value="0571">杭州</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">复选框</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input checked name="" title="写作" type="checkbox">
                            <input name="" title="发呆" type="checkbox">
                            <input disabled name="" title="禁用" type="checkbox">
                        </div>
                        <div class="layui-col-md12">
                            <input checked lay-skin="primary" name="" title="写作" type="checkbox">
                            <input lay-skin="primary" name="" title="发呆" type="checkbox">
                            <input disabled lay-skin="primary" name="" title="禁用" type="checkbox">
                            <input lay-skin="primary" name="" type="checkbox">
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">开关</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input lay-skin="switch" name="xxx" type="checkbox">
                            <input checked lay-skin="switch" lay-text="ON|OFF" name="yyy" type="checkbox">
                            <input lay-skin="switch" lay-text="开启|关闭" name="zzz" type="checkbox">
                            <input disabled lay-skin="switch" name="aaa" type="checkbox">
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">单选框</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input name="sex" title="男" type="radio" value="nan">
                            <input checked name="sex" title="女" type="radio" value="nv">
                            <input disabled name="sex" title="中性" type="radio" value="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">文本域</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <textarea class="layui-textarea" name="" placeholder="请输入"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">响应式组合</div>
                    <div class="layui-card-body">
                        <form action="" class="layui-form" lay-filter="component-form-element">
                            <div class="layui-row layui-col-space10 layui-form-item">
                                <div class="layui-col-lg6">
                                    <label class="layui-form-label">员工姓名：</label>
                                    <div class="layui-input-block">
                                        <input autocomplete="off" class="layui-input" lay-verify="required"
                                               name="fullname"
                                               placeholder="" type="text">
                                    </div>
                                </div>
                                <div class="layui-col-lg6">
                                    <label class="layui-form-label">技术工种：</label>
                                    <div class="layui-input-block">
                                        <select lay-filter="aihao" lay-verify="required" name="type">
                                            <option value=""></option>
                                            <option value="0">前端工程师</option>
                                            <option value="1">Node.js工程师</option>
                                            <option value="2">PHP工程师</option>
                                            <option value="3">Java工程师</option>
                                            <option value="4">运维</option>
                                            <option value="4">视觉设计师</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">兴趣爱好：</label>
                                <div class="layui-input-block">
                                    <input name="interest[write]" title="写作" type="checkbox">
                                    <input name="interest[read]" title="阅读" type="checkbox">
                                    <input checked name="interest[code]" title="代码" type="checkbox">
                                    <input name="interest[dreaming]" title="做梦" type="checkbox">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">是否婚姻：</label>
                                <div class="layui-input-block">
                                    <input lay-skin="switch" lay-text="是|否" name="marriage" type="checkbox">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">所属职称：</label>
                                <div class="layui-input-block">
                                    <input name="role" title="经理" type="radio" value="">
                                    <input name="role" title="主管" type="radio" value="">
                                    <input checked name="role" title="码农" type="radio" value="">
                                    <input name="role" title="端水" type="radio" value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">其它信息：</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea" name="other" placeholder=""></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"> </label>
                                <div class="layui-input-block">
                                    <input checked lay-skin="primary" name="agreement" title="同意" type="checkbox">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-filter="component-form-element" lay-submit>立即提交
                                    </button>
                                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="../lib/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form'], function () {
            var $ = layui.$
                , admin = layui.admin
                , element = layui.element
                , form = layui.form;

            form.render(null, 'component-form-element');
            element.render('breadcrumb', 'breadcrumb');

            form.on('submit(component-form-element)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
</body>


</html>